<template>
	<view>
		<!-- 头部 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#000" size="50"></u-icon>
			<text>手机验证码登录</text>
		</view>
		<view class="content" style="width: 100%;height:90vh;background-color: #fff;">
			
			<form class="cl">
			    <view class="t-a">
		
			     <input type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="mobile" />
			    </view>
			    <view class="t-a" style="display: flex;align-items: center;">
			 
			     <input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="yzm" />
			     <view style="background-color: #007AFF;border-radius: 12px;padding:3px 7px;margin-top: -20px;margin-left:3px" v-if="showText" class="t-c" @click="getCode()">获取验证码</view>
			     <view v-else class="t-c"  style="background-color: #A7A7A7;margin-top:-10px;margin-left:3px;padding:3px 7px;border-radius: 12px;color:#fff">重新发送({{ second }})</view>
			    </view>
			    <button @click="login()">登 录</button>
			   </form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yzm:'',
				showText:true,
				mobile:'',
				second:60
			}
		},
		methods: {
			getCode(){
			    if (!this.mobile) {
			       uni.showToast({ title: '请输入手机号', icon: 'none' });
			       return;
			      }
			      if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.mobile)) {
			       uni.showToast({ title: '请输入正确手机号', icon: 'none' });
			       return;
			      }
			     var that = this;
			       var interval = setInterval(() => {
			        that.showText = false;
			        var times = that.second - 1;
			        //that.second = times<10?'0'+times:times ;//小于10秒补 0
			        that.second = times;
			        console.log(times);
			       }, 1000);
			       setTimeout(() => {
			        clearInterval(interval);
			        that.second = 60;
			        that.showText = true;
			       }, 60000);
			       //这里请求后台获取短信验证码
			       // apiService.getCode({mobile:this.mobile,smsmode:2}).then(res=>{
			       //  if(res.data.code===200){
			         
			       //  }
			       // })
			   },
			login(){
				
			},
		
			// 返回
			navigateBack() {
				// uni.navigateTo({
				// 	url: '../invitation'
				// })
				let pages = getCurrentPages();
				let nowPage = pages[pages.length - 1]
				let prevPage = pages[pages.length - 2]
			
				uni.navigateBack({
					delta: prevPage
				})
			},
		}
	}
</script>

<style scoped lang='scss'>
	.t-login {
	  width: 600rpx;
	  margin: 0 auto;
	  font-size: 28rpx;
	  color: #000;
	 }
	 
	  button {
	  font-size: 28rpx;
	  background: #5677fc;
	  color: #fff;
	  height: 90rpx;
	  line-height: 90rpx;
	  border-radius: 50rpx;
	  box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	 }
	 
	  input {
	  padding: 0 20rpx 0 120rpx;
	  height: 90rpx;
	  line-height: 90rpx;
	  margin-bottom: 50rpx;
	  background: #f8f7fc;
	  border: 1px solid #e9e9e9;
	  font-size: 28rpx;
	  border-radius: 50rpx;
	 }
	 
	.t-a {
	  position: relative;
	 
	 }
	 
   .t-a image {
	  width: 40rpx;
	  height: 40rpx;
	  position: absolute;
	  left: 40rpx;
	  top: 28rpx;
	  border-right: 2rpx solid #dedede;
	  padding-right: 20rpx;
	 }
	 
	 .t-b {
	  text-align: left;
	  font-size: 46rpx;
	  color: #000;
	  padding: 300rpx 0 120rpx 0;
	  font-weight: bold;
	 }
	.content{
		width:100%;
		background-color: #F1F1F1;
		padding:28rpx 36rpx;
		box-sizing: border-box;
		font-size:13px;
		color:#555;
		height: 95vh;
		overflow: auto;
	}
	.navbar {
		padding-top: 90rpx;
		padding-bottom: 40rpx;
		width: 750rpx;
		color: #000;
		background-color: #fff;
/* 		z-index: 555;
		position: fixed;
		top:0;
		overflow: hidden; */
	}

	.navbar>text {
		font-size: 36rpx;
		padding-left: 40rpx;
		font-weight: bold;
	}

	// 内容
	.section {
		padding: 30rpx;
	}
</style>
